<template>
  <div id="news">
    <div class="system">
      <div class="title">
        全部消息
      </div>
      <div v-if="!noNews" class="news-box">
        <div class="no-pager">
          <ul>
            <li v-for="news in newsList">
              <a href="javascript: void(0)">
                <h4>
                  {{ news.me_title }}
                </h4>
                <p class="news-content">
                  回复内容： {{ news.me_content }}
                </p>
                <p class="news-time">
                  {{ news.time }}
                </p>
              </a>
            </li>
          </ul>
        </div>
        <div v-if="total !== 0" class="pager">
          <Page @on-change="changePage" :total="total" :page-size="5"></Page>
        </div>
      </div>
      <div v-else style="text-align: center;line-height: 600px; font-size: 20px;">
        目前暂无系统消息
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalSystemNews',
    data () {
      return {
        newsList: [],
        noNews: false,
        total: 0,
        page: 0
      }
    },
    methods: {
      verify: function () {
        let that = this
        that.getNewsList()
      },
      // 获取消息列表
      getNewsList: function () {
        let that = this
        that.$chaos.ajax({
          url: '/User/getMessageList',
          data: {
            limit: 5,
            page: that.page
          },
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              if (res.result.count) {
                that.total = parseInt(res.result.count)
              }
              if (that.total === 0 && that.page === 0) {
                that.noNews = true
                return false
              }
              that.noNews = false
              that.newsList = res.result.list
            }
          }
        })
      },
      changePage: function (e) {
        let that = this
        let page = e - 1
        if (that.page === page) {
        } else {
          that.page = page
          that.getNewsList()
          let $ = require('jquery')
          $('html,body').animate({
            scrollTop: 200
          }, 200)
        }
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '系统消息',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.$emit('changeCurrent', 2)
      this.verify()
      this.setCrumbs()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>
<style>
  .pager{
    text-align: center;
    padding:20px 0;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
</style>
<style scoped>

</style>
